import React, { useEffect, useRef } from 'react';

const PageWrapper = ({ children, className = '', style = {} }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // 应用统一的页面样式
    const applyUnifiedStyles = () => {
      // 获取视口信息
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      const devicePixelRatio = window.devicePixelRatio || 1;

      // 设置基础样式
      container.style.position = 'relative';
      container.style.top = 'auto';
      container.style.left = 'auto';
      container.style.right = 'auto';
      container.style.bottom = 'auto';
      container.style.height = '100%';
      container.style.width = '100%';
      container.style.overflow = 'auto';
      container.style.padding = '14px';
      container.style.boxSizing = 'border-box';
      container.style.backgroundColor = '#f5f5f5';
      container.style.minHeight = '100%';

      // 根据屏幕尺寸调整样式
      if (viewportWidth < 1366) {
        container.style.padding = '12px';
        container.style.fontSize = '12px';
      } else if (viewportWidth < 1920) {
        container.style.padding = '14px';
        container.style.fontSize = '14px';
      } else if (viewportWidth >= 2560) {
        container.style.padding = '24px';
        container.style.fontSize = '14px';
      }

      // 高DPI屏幕优化
      if (devicePixelRatio >= 2) {
        container.style.webkitFontSmoothing = 'antialiased';
        container.style.mozOsxFontSmoothing = 'grayscale';
      }

      // 添加统一的类名
      if (!container.classList.contains('page-content-unified')) {
        container.classList.add('page-content-unified');
      }

      // 修复内部元素样式
      const fixInternalElements = () => {
        // 修复表格
        const tables = container.querySelectorAll('.ant-table-wrapper');
        tables.forEach(table => {
          table.style.width = '100%';
          table.style.maxWidth = '100%';
          table.style.overflowX = 'auto';
        });

        // 修复表单
        const forms = container.querySelectorAll('.ant-form');
        forms.forEach(form => {
          form.style.width = '100%';
          form.style.maxWidth = '100%';
        });

        // 修复卡片
        const cards = container.querySelectorAll('.ant-card');
        cards.forEach(card => {
          card.style.width = '100%';
          card.style.maxWidth = '100%';
        });

        // 修复固定宽度的容器
        const fixedWidthElements = container.querySelectorAll('div[style*="width"]');
        fixedWidthElements.forEach(element => {
          const elementStyle = window.getComputedStyle(element);
          if (elementStyle.width && elementStyle.width.includes('px') && parseInt(elementStyle.width) > 1200) {
            element.style.width = '100%';
            element.style.maxWidth = '100%';
          }
        });
      };

      // 延迟执行内部元素修复，确保DOM渲染完成
      setTimeout(fixInternalElements, 100);
    };

    // 初始应用样式
    applyUnifiedStyles();

    // 监听窗口大小变化
    const handleResize = () => {
      applyUnifiedStyles();
    };

    window.addEventListener('resize', handleResize);

    // 使用MutationObserver监听DOM变化，确保动态添加的元素也能被修复
    const observer = new MutationObserver(() => {
      setTimeout(applyUnifiedStyles, 50);
    });

    observer.observe(container, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['style', 'class']
    });

    return () => {
      window.removeEventListener('resize', handleResize);
      observer.disconnect();
    };
  }, []);

  return (
    <div 
      ref={containerRef}
      className={`page-wrapper ${className}`}
      style={{
        position: 'relative',
        height: '100%',
        width: '100%',
        overflow: 'auto',
        padding: '14px',
        boxSizing: 'border-box',
        backgroundColor: '#f5f5f5',
        minHeight: '100%',
        ...style
      }}
    >
      {children}
    </div>
  );
};

export default PageWrapper; 